<template>
  <div class="app-container home">
    <div class="layout">
      <nodes-bar ref="nodeBar" :approval-form="approvalForm" :submit-form="submitForm"></nodes-bar>
      <div id="container" class="cavs"></div>
      <!-- <CellInfo @changeNodeName="changeNodeName" :cur-cell="curCell"></CellInfo> -->
      <el-dialog
        :visible.sync="dialogVisible"
        width="400px"
        :title="dialogTitle"
      >
        <el-form
          :model="approvalForm"
          ref="processInfo"
          label-width="110px"
          label-position="left"
          v-if="dialogTitle === '审批信息'"
        >
          <el-form-item prop="name" label="审批人名称">
            <el-input v-model="approvalForm.name"></el-input>
          </el-form-item>
        </el-form>
        <el-form
          :model="submitForm"
          ref="processInfo"
          label-width="110px"
          label-position="left"
          v-else
        >
          <el-form-item prop="name" label="提交人名称">
            <el-input v-model="submitForm.name"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            size="mini"
            class="tableAdd"
            @click="handleSave"
            >确定</el-button
          >
          <el-button
            class="dialogCancel"
            type="primary"
            size="mini"
            @click="dialogVisible = false"
            >关闭</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { Graph } from "@antv/x6";
import NodesBar from "./compoment/NodesBar.vue";
// import CellInfo from "./compoment/CellInfo.vue";
import registerNode from "./shape/registerNode";
import cellHover from "./composables/cellHover";
import cellSelect from "./composables/cellSelect";
import connectEdge from "./composables/connectEdge";
import blankEvent from "./composables/blankEvent";

export default {
  components: { NodesBar },
  data() {
    return {
      graph: {},
      curCell: {},
      test: [
        // {
        //   shape: "edge",
        //   attrs: {
        //     line: {
        //       stroke: "#808080",
        //       strokeWidth: 1,
        //       strokeDasharray: "",
        //     },
        //   },
        //   id: "bf8d1c70-857d-41bb-8271-280a3a104824",
        //   zIndex: -1,
        //   source: {
        //     cell: "32f1b845-9232-4051-b742-8bbf1c7d23a1",
        //     port: "p_bottom",
        //   },
        //   target: {
        //     cell: "a4288f97-97c1-4bcd-8c28-fcd9a94f056b",
        //     port: "p_top",
        //   },
        // },
        // {
        //   shape: "edge",
        //   attrs: {
        //     line: {
        //       stroke: "#808080",
        //       strokeWidth: 1,
        //       strokeDasharray: "",
        //     },
        //   },
        //   id: "f4ce3de8-c388-41ee-9833-ef6e1f1dba2a",
        //   zIndex: -1,
        //   source: {
        //     cell: "a4288f97-97c1-4bcd-8c28-fcd9a94f056b",
        //     port: "p_bottom",
        //   },
        //   target: {
        //     cell: "4291dc4c-c346-4727-895b-e472616e94b7",
        //     port: "p_top",
        //   },
        // },
        // {
        //   shape: "edge",
        //   attrs: {
        //     line: {
        //       stroke: "#808080",
        //       strokeWidth: 1,
        //       strokeDasharray: "",
        //     },
        //   },
        //   id: "ce3efe66-30bd-4682-b00f-980fd5598255",
        //   zIndex: -1,
        //   source: {
        //     cell: "4291dc4c-c346-4727-895b-e472616e94b7",
        //     port: "p_bottom",
        //   },
        //   target: {
        //     cell: "2a156147-d9df-4311-b81a-dffd98928800",
        //     port: "p_top",
        //   },
        // },
        // {
        //   shape: "edge",
        //   attrs: {
        //     line: {
        //       stroke: "#808080",
        //       strokeWidth: 1,
        //       strokeDasharray: "",
        //     },
        //   },
        //   id: "7391f9bd-bbe8-463f-bcb9-9fe529c554d9",
        //   zIndex: -1,
        //   source: {
        //     cell: "2a156147-d9df-4311-b81a-dffd98928800",
        //     port: "p_bottom",
        //   },
        //   target: {
        //     cell: "d4a68d9e-2e53-41a3-9983-81a47052c60c",
        //     port: "p_top",
        //   },
        // },
        // {
        //   shape: "edge",
        //   attrs: {
        //     line: {
        //       stroke: "#808080",
        //       strokeWidth: 1,
        //       strokeDasharray: "",
        //     },
        //   },
        //   id: "ec9132e0-8711-4f66-992b-6368e3af9347",
        //   zIndex: -1,
        //   source: {
        //     cell: "2a156147-d9df-4311-b81a-dffd98928800",
        //     port: "p_right",
        //   },
        //   target: {
        //     cell: "fe0b0e6c-10ea-4c44-b254-e305eca02460",
        //     port: "p_top",
        //   },
        // },
        // {
        //   shape: "edge",
        //   attrs: {
        //     line: {
        //       stroke: "#808080",
        //       strokeWidth: 1,
        //       strokeDasharray: "",
        //     },
        //   },
        //   id: "527f2093-ea6d-49ed-9246-3ee69e3649ab",
        //   zIndex: -1,
        //   source: {
        //     cell: "fe0b0e6c-10ea-4c44-b254-e305eca02460",
        //     port: "p_bottom",
        //   },
        //   target: {
        //     cell: "d4a68d9e-2e53-41a3-9983-81a47052c60c",
        //     port: "p_right",
        //   },
        // },
        // {
        //   position: {
        //     x: 210,
        //     y: 50,
        //   },
        //   shape: "start-node",
        //   id: "32f1b845-9232-4051-b742-8bbf1c7d23a1",
        //   zIndex: 1,
        // },
        // {
        //   position: {
        //     x: 210,
        //     y: 500,
        //   },
        //   shape: "end-node",
        //   ports: {
        //     items: [
        //       {
        //         group: "port_g",
        //         id: "p_top",
        //         connected: true,
        //       },
        //       {
        //         group: "port_g",
        //         id: "p_right",
        //         connected: true,
        //       },
        //       {
        //         group: "port_g",
        //         id: "p_bottom",
        //       },
        //       {
        //         group: "port_g",
        //         id: "p_left",
        //       },
        //     ],
        //     groups: {
        //       port_g: {
        //         attrs: {
        //           circle: {
        //             r: 4,
        //             magnet: true,
        //             stroke: "#31d0c6",
        //             strokeWidth: 2,
        //             fill: "#fff",
        //           },
        //         },
        //         position: "ellipseSpread",
        //       },
        //     },
        //   },
        //   id: "d4a68d9e-2e53-41a3-9983-81a47052c60c",
        //   zIndex: 2,
        // },
        // {
        //   position: {
        //     x: 180,
        //     y: 140,
        //   },
        //   shape: "general-node",
        //   ports: {
        //     items: [
        //       {
        //         group: "in",
        //         id: "p_top",
        //         connected: true,
        //       },
        //       {
        //         group: "right-out",
        //         id: "p_right",
        //       },
        //       {
        //         group: "bottom-out",
        //         id: "p_bottom",
        //       },
        //       {
        //         group: "left-out",
        //         id: "p_left",
        //       },
        //     ],
        //     groups: {
        //       in: {
        //         position: "top",
        //         zIndex: 1,
        //         attrs: {
        //           circle: {
        //             r: 4,
        //             magnet: true,
        //             stroke: "#31d0c6",
        //             strokeWidth: 2,
        //             fill: "#fff",
        //           },
        //         },
        //       },
        //       "bottom-out": {
        //         position: "bottom",
        //         zIndex: 1,
        //         attrs: {
        //           circle: {
        //             r: 4,
        //             magnet: true,
        //             stroke: "#31d0c6",
        //             strokeWidth: 2,
        //             fill: "#fff",
        //           },
        //         },
        //       },
        //       "right-out": {
        //         position: "right",
        //         zIndex: 20,
        //         attrs: {
        //           circle: {
        //             r: 4,
        //             magnet: true,
        //             stroke: "#31d0c6",
        //             strokeWidth: 2,
        //             fill: "#fff",
        //           },
        //         },
        //       },
        //       "left-out": {
        //         position: "left",
        //         zIndex: 20,
        //         attrs: {
        //           circle: {
        //             r: 4,
        //             magnet: true,
        //             stroke: "#31d0c6",
        //             strokeWidth: 2,
        //             fill: "#fff",
        //           },
        //         },
        //       },
        //     },
        //   },
        //   id: "a4288f97-97c1-4bcd-8c28-fcd9a94f056b",
        //   zIndex: 3,
        // },
        // {
        //   position: {
        //     x: 180,
        //     y: 240,
        //   },
        //   shape: "special-node",
        //   ports: {
        //     items: [
        //       {
        //         group: "in",
        //         id: "p_top",
        //         connected: true,
        //       },
        //       {
        //         group: "right-out",
        //         id: "p_right",
        //       },
        //       {
        //         group: "bottom-out",
        //         id: "p_bottom",
        //       },
        //       {
        //         group: "left-out",
        //         id: "p_left",
        //       },
        //     ],
        //     groups: {
        //       in: {
        //         position: "top",
        //         zIndex: 20,
        //         attrs: {
        //           circle: {
        //             r: 4,
        //             magnet: true,
        //             stroke: "#31d0c6",
        //             strokeWidth: 2,
        //             fill: "#fff",
        //           },
        //         },
        //       },
        //       "bottom-out": {
        //         position: "bottom",
        //         zIndex: 20,
        //         attrs: {
        //           circle: {
        //             r: 4,
        //             magnet: true,
        //             stroke: "#31d0c6",
        //             strokeWidth: 2,
        //             fill: "#fff",
        //           },
        //         },
        //       },
        //       "right-out": {
        //         position: "right",
        //         zIndex: 20,
        //         attrs: {
        //           circle: {
        //             r: 4,
        //             magnet: true,
        //             stroke: "#31d0c6",
        //             strokeWidth: 2,
        //             fill: "#fff",
        //           },
        //         },
        //       },
        //       "left-out": {
        //         position: "left",
        //         zIndex: 20,
        //         attrs: {
        //           circle: {
        //             r: 4,
        //             magnet: true,
        //             stroke: "#31d0c6",
        //             strokeWidth: 2,
        //             fill: "#fff",
        //           },
        //         },
        //       },
        //     },
        //   },
        //   id: "4291dc4c-c346-4727-895b-e472616e94b7",
        //   zIndex: 4,
        // },
        // {
        //   position: {
        //     x: 210,
        //     y: 340,
        //   },
        //   shape: "shunt-node",
        //   ports: {
        //     items: [
        //       {
        //         group: "in",
        //         id: "p_top",
        //         args: {
        //           dx: -20,
        //         },
        //         connected: true,
        //       },
        //       {
        //         group: "right-out",
        //         id: "p_right",
        //         args: {
        //           dy: -20,
        //         },
        //       },
        //       {
        //         group: "bottom-out",
        //         id: "p_bottom",
        //         args: {
        //           dx: 20,
        //         },
        //       },
        //       {
        //         group: "left-out",
        //         id: "p_left",
        //         args: {
        //           dy: 20,
        //         },
        //       },
        //     ],
        //     groups: {
        //       in: {
        //         position: "top",
        //         zIndex: 1,
        //         attrs: {
        //           circle: {
        //             r: 4,
        //             magnet: true,
        //             stroke: "#31d0c6",
        //             strokeWidth: 2,
        //             fill: "#fff",
        //           },
        //         },
        //       },
        //       "bottom-out": {
        //         position: "bottom",
        //         zIndex: 1,
        //         attrs: {
        //           circle: {
        //             r: 4,
        //             magnet: true,
        //             stroke: "#31d0c6",
        //             strokeWidth: 2,
        //             fill: "#fff",
        //           },
        //         },
        //       },
        //       "right-out": {
        //         position: "right",
        //         zIndex: 20,
        //         attrs: {
        //           circle: {
        //             r: 4,
        //             magnet: true,
        //             stroke: "#31d0c6",
        //             strokeWidth: 2,
        //             fill: "#fff",
        //           },
        //         },
        //       },
        //       "left-out": {
        //         position: "left",
        //         zIndex: 20,
        //         attrs: {
        //           circle: {
        //             r: 4,
        //             magnet: true,
        //             stroke: "#31d0c6",
        //             strokeWidth: 2,
        //             fill: "#fff",
        //           },
        //         },
        //       },
        //     },
        //   },
        //   id: "2a156147-d9df-4311-b81a-dffd98928800",
        //   zIndex: 5,
        // },
        // {
        //   position: {
        //     x: 340,
        //     y: 410,
        //   },
        //   shape: "general-node",
        //   ports: {
        //     items: [
        //       {
        //         group: "in",
        //         id: "p_top",
        //         connected: true,
        //       },
        //       {
        //         group: "right-out",
        //         id: "p_right",
        //       },
        //       {
        //         group: "bottom-out",
        //         id: "p_bottom",
        //       },
        //       {
        //         group: "left-out",
        //         id: "p_left",
        //       },
        //     ],
        //     groups: {
        //       in: {
        //         position: "top",
        //         zIndex: 1,
        //         attrs: {
        //           circle: {
        //             r: 4,
        //             magnet: true,
        //             stroke: "#31d0c6",
        //             strokeWidth: 2,
        //             fill: "#fff",
        //           },
        //         },
        //       },
        //       "bottom-out": {
        //         position: "bottom",
        //         zIndex: 1,
        //         attrs: {
        //           circle: {
        //             r: 4,
        //             magnet: true,
        //             stroke: "#31d0c6",
        //             strokeWidth: 2,
        //             fill: "#fff",
        //           },
        //         },
        //       },
        //       "right-out": {
        //         position: "right",
        //         zIndex: 20,
        //         attrs: {
        //           circle: {
        //             r: 4,
        //             magnet: true,
        //             stroke: "#31d0c6",
        //             strokeWidth: 2,
        //             fill: "#fff",
        //           },
        //         },
        //       },
        //       "left-out": {
        //         position: "left",
        //         zIndex: 20,
        //         attrs: {
        //           circle: {
        //             r: 4,
        //             magnet: true,
        //             stroke: "#31d0c6",
        //             strokeWidth: 2,
        //             fill: "#fff",
        //           },
        //         },
        //       },
        //     },
        //   },
        //   id: "fe0b0e6c-10ea-4c44-b254-e305eca02460",
        //   zIndex: 6,
        // },
      ],
      graphData: null,
      dialogVisible: false,
      dialogTitle: null,
      approvalForm: {
        name: "",
        id: "",
      },
      submitForm: {
        name: "",
        id: ""
      }
    };
  },
  methods: {
    init() {
      this.graph.value = new Graph({
        container: document.getElementById("container"),
        width: "100%",
        height: "100%",
        selecting: true, // 点选/框选，默认禁用。
        snapline: true,
        grid: {
          size: 10, // 网格大小 10px
          visible: false, // 渲染网格背景
        },
        highlighting: {
          // 当链接桩可以被链接时，在链接桩外围渲染一个 2px 宽的红色矩形框
          magnetAvailable: {
            name: "stroke",
            args: {
              padding: 4,
              attrs: {
                "stroke-width": 4,
                stroke: "skyblue",
              },
            },
          },
          magnetAdsorbed: {
            name: "stroke",
            args: {
              padding: 4,
              attrs: {
                "stroke-width": 8,
                stroke: "skyblue",
              },
            },
          },
        },
        connecting: {
          snap: true,
          allowBlank: false,
          allowLoop: false,
          highlight: true,
          sourceAnchor: {
            name: "center",
          },
          targetAnchor: "center",
          connectionPoint: "anchor",
          // connector: 'smooth',
          router: "manhattan",
          validateMagnet({ magnet }) {
            return magnet.getAttribute("port-group") !== "in";
          },
          createEdge() {
            return this.createEdge({
              zIndex: -1,
              attrs: {
                line: {
                  strokeDasharray: "5 5",
                  stroke: "#808080",
                  strokeWidth: 1,
                  targetMarker: {
                    name: "block",
                    args: {
                      size: "6",
                    },
                  },
                },
              },
            });
          },
          validateConnection({ targetView, sourceMagnet, targetMagnet }) {
            if (!sourceMagnet || !targetMagnet) {
              return false;
            }
            const portId = targetMagnet.getAttribute("port");
            const node = targetView.cell;
            const port = node.getPort(portId);
            if (!port) {
              return false;
            }
            return true;
          },
        },
      });
      this.graph.value.fromJSON(this.test);
      this.$nextTick(() => {
        this.$refs.nodeBar.initDnd(this.graph.value);
      });
      this.graph.value.on("node:click", (e) => {
        if (e.node.shape === "general-node") {
          this.dialogTitle = "审批信息";
          this.dialogVisible = true;
          this.approvalForm.id = e.node.id;
        } else if (e.node.shape === "special-node") {
          this.dialogTitle = "提交信息";
          this.dialogVisible = true;
          this.submitForm.id = e.node.id;
        }
      });
      // cellEvents(this.graph);
      cellHover(this.graph);
      cellSelect(this.graph, this.curCell);
      connectEdge(this.graph);
      blankEvent(this.graph, this.curCell);
    },
    handleSave() {
      this.dialogVisible = false;
    },
    // changeNodeName(name) {
    //   this.curCell.value.isNode() && this.curCell.value.setAttrs({ label: { text: name } });
    //   this.curCell.value.isEdge() && this.curCell.value.setLabels(name);
    // }
  },
  mounted() {
    registerNode(Graph);
    this.init();
  },
};
</script>

<style scoped lang="scss">
.layout {
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  .cavs {
    width: 100%;
    height: 600px;
  }
}

.x6-node {
  [magnet="true"] {
    cursor: crosshair;
    transition: none;

    &[port-group="in"] {
      cursor: move;
    }
  }

  .x6-port-body {
    visibility: hidden;
  }
}

.general-node-selected {
  rect {
    fill: #ffdfc4;
    stroke-width: 2;
  }
}
.special-node-selected {
  rect {
    fill: #f8c5c8;
    stroke-width: 2;
  }
}
.shunt-node-selected {
  rect {
    fill: #ccd0f6;
    stroke-width: 2;
  }
}
.start-node-selected {
  circle {
    fill: #d4fff0;
    stroke-width: 2;
  }
}
.end-node-selected {
  circle {
    fill: #ccd0f6;
    stroke-width: 2;
  }
}
</style>